<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>外边距</title>
		<style>
			*{ /* *通配符:初始化所有标签的内边距和外边距 */
				margin: 0px;
				padding: 0px;
			}
			.box1{width: 300px;
			height: 200px;
			background-color: aqua;
			
			margin:100px;
			
				
			}
			.box2{width: 500px;
			height: 300px;
			background-color: aqua;
			
				
			}
			.bigbox{width: 600px;
			height: 600px;
			background-color: aqua;
			margin-top:100px ;
			/* border: 1px solid blanchedalmond; */
				/* padding-top: 100px; */
				overflow: hidden;
				float: left;
			}
			.sbox{width: 300px;
			height: 300px;
			background-color: palevioletred;
			margin-bottom: 100px;
				
			}
			
		</style>
		<!-- 外边距 margin
		 1.概念:盒子与盒子之间的距离
		 2.应用：
		 2.1可以让块级盒子水平居中，前提条件是盒子有宽度，再给左右外边距设置为auto
		 2.2.初始化所有标签的内外边距
		 3.相邻块级盒子垂直外边距合并取最大值--><!-- 只给一个盒子写外边距 -->
		 <!-- 
		  4.嵌套块级盒子外边距塌陷问题解决方式
		  方式1：给父盒子添加边框(border)
		  方式2：给父盒子添加内边距(padding)
		  方式3：给父盒子添加overflow: hidden;(开发中常用的)
		  -->
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
		<div class="bigbox">
			<div class="sbox"></div>
		</div>
		
		
	</body>
</html>
